<template>
  <div class="employees-container">
    <div class="app-container">
      <el-card>
        <el-tabs v-model="tabValue">
          <el-tab-pane label="登录账户设置" name="loginSetting">
            <login-setting :employessInfo="employessInfo"></login-setting>
          </el-tab-pane>
          <el-tab-pane label="个人详情" name="userInfo">
            <user-info :employessInfo="employessInfo" :departmentList="departmentList"></user-info>
          </el-tab-pane>
          <el-tab-pane label="岗位信息" name="joinInfo">
            <join-info></join-info>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script>
  import joinInfo from './detail/join-info.vue'
  import userInfo from './detail/user-info.vue'
  import loginSetting from './detail/login-setting.vue'
  import { transTree } from '@/utils/handleTreeData.js' // 属性结构转换
  import {
    getUserPhotoAPI,
    getDepartmentListAPI
  } from '@/api'
  export default {
    name: 'employeeDetail',
    data(){
      return{
        employessInfo: {}, // 请求当前用户的基本信息
        tabValue: 'userInfo',
        departmentList: []
      }
    },
    created() {
      this.getUserInfoFn() // 获取当前用户信息
      this.getDepartmentListFn() // 获取组织部门列表
    },
    methods: {
      // 根据 id 获取员工信息
      async getUserInfoFn() {
        const {
          id
        } = this.$route.query
        const res = await getUserPhotoAPI(id)
        this.employessInfo = res.data
        // 如果聘用形式为未知则路由传递过来的参数是undefined,手动赋予值为3,显示未知即可
        if(this.$route.query.form == 'undefined'){
          this.employessInfo.formOfEmployment = +3
        }else{
          // 问题: 下面这样写,为何点击页面下拉菜单,标签里显示的值不变,vue里数据名里值变了
          // 问题: 视图 > 数据 >,但是数据改变了 > 响应没有更新给视图
          // Vue框架原理: 响应式原理
          // Vue内部会检测 data 里每个变量(如果变量本身改变了 -> 上面那句话,响应式更新视图所有)
          // 检测 userInfo 里每个属性(检测到变化,会更新数据 + 视图)
          // 上面数据劫持已经绑定完毕
          // 但是,走到这句话的时候, 数据 -> 视图(但是没有绑定数据劫持)没有 getter setter

          // 给 "对象后续添加一个属性" 的时候, "还想双向绑定好用" 不会应该对象本身的响应式触发
          // 解决: 如果你要后续给对象添加属性
          // $set Vue2内部提供的一个专门更新数组/对象某个值的(并且额外添加数据劫持) Vue3没这些问题
          // 参数1 target
          // 参数2 属性字段
          // 参数3 value
          // this.$set(this.employessInfo,formOfEmployment,+this.$route.query.form)
          this.employessInfo.formOfEmployment = +this.$route.query.form
        }
      },
      // 获取组织结构列表数据(添加员工选择部门时使用)
      async getDepartmentListFn(){
        const res = await getDepartmentListAPI()
        this.departentList = transTree(res.data.depts,'')
        this.departmentList = res.data.depts
      },
    },
    components:{
      joinInfo,
      userInfo,
      loginSetting,
    }
  }
</script>

<style>
</style>
